// user-button.tsx
'use client';
import React from 'react';
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
// import {useCurrentUser} from "@/hooks/social/use-current-user";
import {Loader, LogOut} from "lucide-react";
import {useCurrentUser} from "@/hooks/use-current-user";
import Link from 'next/link';
import {CgProfile} from "react-icons/cg";

const UserButton = () => {
    const user = useCurrentUser()
    // console.log(user)
    // const {user} = useCurrentUser()

    // if(isLoading)
    // if (!user) return null
    if (!user) return <Loader className={`size-4 animate-spin text-muted-foreground`}/>
    const {name, image} = user

    const avatarFallback = name!.charAt(0).toUpperCase()

    return (
        <DropdownMenu modal={false}>
            <DropdownMenuTrigger className={`outline-none relative`}>
                <Avatar className={`rounded-md size-10 hover:opacity-75 transition`}>
                    <AvatarImage className={`rounded-md`} alt={name}
                        // @ts-ignore
                                 src={image}/>
                    <AvatarFallback className={`rounded-md bg-sky-500 text-white`}>
                        {avatarFallback}
                    </AvatarFallback>
                </Avatar>
            </DropdownMenuTrigger>
            <DropdownMenuContent align={'center'} side={'right'} className={'w-60'}>
                <Link href={'/api/auth/signout'}>
                    <DropdownMenuItem className={`h-10`}>
                        <LogOut className={`size-4 mr-2`}/>
                        退出登录
                    </DropdownMenuItem>
                </Link>
                <Link href={'/settings'}>
                    <DropdownMenuItem className={`h-10`}>
                        <CgProfile className={`size-4 mr-2`}/>
                        个人信息
                    </DropdownMenuItem>
                </Link>
            </DropdownMenuContent>
        </DropdownMenu>
    );
};

export default UserButton;